<template>
  <li class="item-child" :class="{'active': value === $parent.curActive}" @click="itemClick">
    <slot/>
  </li>
</template>

<script>
  export default {
    name: "item-child",
    props: {
      value: [String, Number]
    },
    computed: {
      index() {
        return this.$parent.$slots.default.indexOf(this.$vnode);
      }
    },
    methods: {
      itemClick () {
        console.log(this.index)
        this.$parent.curActive = this.value;
        this.$parent.emitEvent('input',this.value);
      }
    }
  }
</script>

<style scoped lang="scss">
  .item-child {
    padding: 10px 40px;
    background-color: #f9f9fb;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #fff;
    color: #506679;
    &.active {
      border-color: #5888ee;
      color: #5888ee;
      background: #fff url("./select-icon.png") no-repeat right bottom;
      background-size: 25px;
    }
  }
</style>
